<template>
  <view>
    <u-navbar
      backIconColor="#333333"
      title-size="36"
      title="开通分享分红权限"
      height="50"
      :is-back="true"
      :border-bottom="false"
      title-color="#333333"
    >
    </u-navbar>
    <view class="card">
      <view class="apply-view2">
        <view class="apply-view2-top">
          <view class="" style="font-size: 32rpx">
            开通权益金额：<text style="color: #10a28f">¥</text
            ><text style="font-weight: 600; font-size: 36rpx; color: #10a28f">{{
              (growthInfo.bonusBenefitPrice * 0.01).toFixed(2)
            }}</text>
            <text>/{{ bonusBenefitDays }}</text>
          </view>
        </view>
        <view class="floor-tip">
          <view @click="checked = !checked">
            <u-icon
              :name="checked ? '/static/selected.png' : '/static/unselect.png'"
              size="35"
              style="margin-right: 10rpx; margin-top: 12rpx"
            ></u-icon>
          </view>
          <text>商家开通分享分红权益协议</text>
          <text
            style="color: #fa453c"
            @click="routeTo('/universal/webcontent/webcontent?key=agency_agreement')"
            >《平台代理协议》</text
          >
        </view>

        <view @click="paySubmit" class="submit-pay"> 立即支付 </view>
      </view>
    </view>

    <view class="card">
      <u-parse :html="growthInfo.bonusBenefitTips" />
    </view>

    <PayPopup ref="payPopupRef">
      <p style="font-size: 40rpx; font-weight: 600; padding: 20rpx; text-align: center">
        入驻缴费
      </p>
    </PayPopup>
  </view>
</template>

<script>
import PayPopup from '@/components/PayPopup.vue'
export default {
  components: {
    PayPopup
  },
  data() {
    return {
      growthInfo: '',
      checked: true,
      bonusBenefitDays: '1年',
      payOrderId: ''
    }
  },
  onLoad(options) {
    this.$u.get('/app-api/member/growth/overview').then((res) => {
      this.growthInfo = res.data
      if (this.growthInfo.bonusBenefitDays == '365') {
        this.bonusBenefitDays = '1年'
      } else if (this.growthInfo.bonusBenefitDays == '180') {
        this.bonusBenefitDays = '半年'
      } else if (this.growthInfo.bonusBenefitDays == '30') {
        this.bonusBenefitDays = '1月'
      }
    })
  },
  methods: {
    paySubmit() {
      this.$u
        .post('/app-api/member/agency-order/create', {
          packageId: this.packages.id
        })
        .then((res) => {
          this.payOrderId = res.data.tradeNo
          this.$refs.payPopupRef.open(this.payOrderId, '', res.data.price === 0)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-view2-top {
  background-color: #fff;
  padding: 30rpx;
  font-size: 30rpx;
  color: #333333;
  width: 670rpx;
  background: #f2f2f2;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.submit-pay {
  width: 90%;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background: #10a28f;
  border-radius: 65rpx;
  color: #ffffff;
  align-self: center;
  font-size: 35rpx;
  margin: 20rpx auto;
}

.card {
  width: 710rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx auto;
  padding: 30rpx 20rpx;
}
.floor-tip {
  display: flex;
  align-items: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333333;
  width: 100%;
}
</style>
